<script setup>

import u3606 from '@/assets/u3606.png'
import u3520 from '@/assets/u3520_div.png'
import u3513 from '@/assets/u3513.png'
import u2338 from '@/assets/u2338.svg'

import u2 from '@/assets/下载 (2).png'
import u3 from '@/assets/下载 (3).png'
import u4 from '@/assets/下载 (4).png'
import { useStore } from '@/stores/user'
import { ref } from 'vue'
import { userrequsertFn } from '@/api/UserApi'

const userinfoname = ref('')
const useravatar = ref('')
// 获取用户信息
userrequsertFn({
  action:'get_user',
  token: localStorage.getItem('token') || '',
  user_id: localStorage.getItem('userid') || ''
}).then(res => {

  userinfoname.value = res.data.data.full_name
//   console.log(res.data.data.full_name);
useravatar.value = res.data.data.avatar
})

// const store = useStore()
// function escClick() {
//     store.changStore({
//         username: '',
//         password: '',
//         userflog: false,
//         userid: '',
//     })

    
// }

</script>


<template>
    <div class="container">
        <div class="user">
            <div class="userimage">
            <van-image class="photo" round width="1rem" height="1rem" fit="cover" :src="useravatar" />

            </div>
            <div class="username">
                <h1>{{userinfoname}}</h1>
                <p>Ai新手小白</p>
            </div>
        </div>
        <div class="vip">
            <div class="vipbox">
                <van-image height="70%" fit="cover" :src="u3606" />
                <div class="viptext">
                    <p style="font-size: 0.2rem; color:#fff; font-weight: 500;">VIP会员</p>
                    <p style="font-size: 0.1rem; color:#fff; font-weight: 500;">升级解锁全部功能</p>
                </div>
            </div>
            <van-button class="vipbtn">立即解锁</van-button>
        </div>
        <div class="grid">
            <van-grid :border="false" icon-size="50px">
                <van-grid-item :icon="u2" text="我的收藏" to="/collection"/>
                <van-grid-item :icon="u3513" text="我的创作" to="/create" />
                <van-grid-item :icon="u3520" text="任务中心" to="/mission" />
                <van-grid-item :icon="u3" text="分享有礼" />
            </van-grid>
        </div>
        <div>
            <van-cell-group inset>
                <van-cell title="编辑资料" is-link to="/editdata" />
                <van-cell title="我的动态" is-link to="index" />
                <van-cell title="安全设置" is-link to="index" />
                <van-cell title="服务条款" is-link to="index" />
                <van-cell title="退出账号" @click="escClick" is-link to="/login" />
            </van-cell-group>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: calc(100% - .7rem);
    padding: 5%;
    padding-top: 15%
}

.user {

    display: flex;
    align-items: center;
    margin-bottom: 20px;
    // .userimage {
        
    // }
    .photo {
        margin-right: 20px;
    }

    .username {
        h1 {
            margin: 0;
            margin-bottom: 5px;
        }

        p {
            margin: 0;
            color: rgb(123, 148, 171);
        }
    }

}

.vip {
    height: 80px;
    background: url('../../assets/u2338.svg') no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-radius: 15px;
    margin-bottom: 20px;

    .vipbox {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .viptext {
        p {
            margin: 5px 10px;

        }

    }

    .vipbtn {
        background-color: #ffd60a;
        border: 0;
        color: #2b2b2b;
    }
}

.grid {
    margin-bottom: 20px;
    border-radius: 15px;
    width: 100%;

    .van-grid {
        width: 100%;
        --van-grid-item-content-padding: 10px
    }

}

.van-cell-group {

    margin: 0;


}
</style>